<template>
  <div class="box">
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <h1>登录</h1>
    <div class="main">
      <van-form class="input">
        <!-- 输入用户名 -->
        <van-field
          label="用户名"
          required
          name="pattern"
          placeholder="请输入用户名"
          v-model="name"
          :rules="[{ pattern, message: '请输入正确内容' }]"
        />

        <!-- 输入密码 -->
        <van-field
          v-model="password"
          type="password"
          required
          name="validator"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ validator, message: '请输入正确内容' }]"
        />
      </van-form>
      <!-- 登录按钮 -->
      <div style="margin: 16px">
        <van-button round block type="danger" @click="log">登录</van-button>
      </div>
      <van-row type="flex" justify="space-between">
        <van-col span="忘记密码?">忘记密码</van-col>

        <van-col span="注册" @click="register">注册</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      name: "",
      password: "",
      pattern: /^\w{6}$/,
    };
  },
  methods: {
    validator(val) {
      return /^\d{6}$/.test(val);
    },
    log() {
      if (this.mobile == "" || this.name == "") {
        Toast("信息未完善");
        return;
      }
      const params = `useName=${this.name}&usePwd=${this.password}`;
      // console.log(params);
      this.axios.post("/user/login", params).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          // 登录成功
          Toast("登录成功");
          // 调用mutation的方法，修改vuex中的登录用户名
          this.$store.commit("updateName", this.name);
          this.$router.push("/");

          // 获得用户id及手机号
          let uid = res.data.results.user_id;
          let phone = res.data.results.phone;
          // console.log(uid);
          // console.log(phone);
          // 调用mutation的方法，修改vuex中的登录用户id及手机号
          this.$store.commit("updateUid", uid);
          this.$store.commit("updatePhone", phone);
        } else {
          // 登录失败
          this.$messagebox("提示", "账号密码输入错误");
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    register() {
      this.$router.push("/register");
    },
  },
};
</script>
<style scoped>
.box {
  background: url("../assets/1.jpg") center center no-repeat;
  /* div充满全屏 */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* 背景图调整大小: cover */
  background-size: cover;
}
.van-nav-bar {
  background-color: #fee2cb;
}

.main {
  background-color: #fee2cb;
  opacity: 80%;
  position: absolute;
  width: 80%;
  height: 30%;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
h1 {
  text-align: center;
  color: #ef7c4f;
}
.van-button {
  background-color: #ef7c4f;
  border-style: none;
  color: black;
}
.van-cell {
  margin-top: 5px;
  border-radius: 10px;
}
.controls {
  margin-top: 5px;
}
.van-col {
  font-size: 13px;
}
.van-nav-bar__text {
  color: #323233;
}
</style>